<template name="chooseAddress">
    <view >
		
		<u-popup mode="bottom" :show="ismask" round="30" closeable :customStyle="{height:'800rpx',width:'100%'}"  @close="closePupop" >
			<view class="all-quan">
				
				
			   
			    <view class="adres_h1">
			        选择地区
			        <!-- <view class="detel" @tap="closePupop">
			            <image src="/static/xxx.png"></image>
			        </view> -->
			    </view>
			    <view class="adre_bott" style="color: #000000;">
			        <view v-if="prov.length == 0" :class="[isprov ? 'hong': '']" @tap="x_prov">请选择</view>
			        <view v-else @tap="x_prov">
			            <text :class="[tar == 1 ? 'hong': '']">{{prov}}</text>
			        </view>
			        <view v-if="iscitys">
			            <view v-if="city.length == 0" :class="[iscity ? 'hong': '']">请选择</view>
			            <view v-else @tap="x_city">
			                <text :class="[tar == 2 ? 'hong': '']">{{city}}</text>
			            </view>
			        </view>
			        <view v-if="isqus">
			            <view v-if="area.length == 0" :class="[isqu ? 'hong': '']">请选择</view>
			            <view v-else @tap="x_qu">
			                <text :class="[tar == 3 ? 'hong': '']">{{area}}</text>
			            </view>
			        </view>
			        <view v-if="isjies">
			            <view v-if="town.length == 0" :class="[isjie ? 'hong': '']">请选择</view>
			            <view v-else @tap="x_jie">
			                <text :class="[tar == 4 ? 'hong': '']">{{town}}</text>
			            </view>
			        </view>
			    </view>
			    <view  class="srcoll" style="color: #000000;">
			        <!-- 省 -->
			        <view v-if="isprov">
			            <view class="adres_list" :class="[tas1 == proIdx ? 'tas_a' : '']" :key='proIdx' v-for="(item,proIdx) in province"
			                :data-index="proIdx" :id="item.cityCode" :data-name="item.cityName" @tap="getprovs">{{item.cityName}}
			               <!-- <view class="adres_r" v-if="tas1 == proIdx">
			                    <image src="/static/images/gou.png"></image>
			                </view> -->
			            </view>
			        </view>
			        <!-- 市 -->
			        <view v-if="iscity">
			            <view class="adres_list" :class="[tas2 == cityIdx ? 'tas_a' : '']" :key='cityIdx' v-for="(item,cityIdx) in citys"
			                :data-index="cityIdx" :id="item.cityCode" :data-name="item.cityName" @tap="getcity">{{item.cityName}}
			              <!--  <view class="adres_r" v-if="tas2 == cityIdx">
			                    <image src="/static/images/gou.png"></image>
			                </view> -->
			            </view>
			        </view>
			        <!-- 区 -->
			        <view v-if="isqu">
			            <view class="adres_list" :class="[tas3 == areaIdx ? 'tas_a' : '']" :key='areaIdx' v-for="(item,areaIdx) in areas"
			                :id="item.cityCode" :data-index="areaIdx" :data-name="item.cityName" @tap="getarea">{{item.cityName}}
			               <!-- <view class="adres_r" v-if="tas3 == areaIdx">
			                    <image src="/static/images/gou.png"></image>
			                </view> -->
			            </view>
			        </view>
			        <!-- 街道-->
			        <view v-if="isjie">
			            <view class="adres_list" :class="[tas4 == townIdx ? 'tas_a' : '']" :key='townIdx' v-for="(item,townIdx) in towns"
			                :data-index="townIdx" :id="item.cityCode" :data-name="item.cityName" @tap="gettown">{{item.cityName}}
			               <!-- <view class="adres_r" v-if="tas4 == townIdx">
			                    <image src="/static/images/gou.png"></image>
			                </view> -->
			            </view>
			        </view>
			
			    </view>
			
			</view>
		</u-popup>
        
        <!-- <view class="mask" v-if="ismask" @touchmove='true'></view> -->
		
    </view>

</template>

<script>
	/**
	 * address 选择地址
	 */
      import uPopup from 'uview-ui/components/u-popup/u-popup';
    export default {
		components:{
			uPopup
		},
		name:'chooseAddress',
        data() {
            return {
                prov: [], //省
                city: [], //市
                area: [], //县、区
                town: [], //街道
                province: [],
                citys: [],
                areas: [],
                towns: [],
                isprov: true,
                iscitys: false, //是否显示市
                iscity: false,
                isqus: false, //是否显示县、区
                isqu: false,
                isjies: false, //是否显示街道
                isjie: false,
                tas1: 999,
                tas2: 0,
                tas3: 0,
                tas4: 0,
                tar: -1,
                g_town: [],
                province_id: '',
                city_id: '',
                area_id: '',
                town_id: '',
                tapTime: 0,
                result: '',
				
            };
        },
       
		props: {
            type: {
                type: String,
                value: 'primary',
            },
            ismask: {
                type: Boolean,
                value: false
            },
			
        },
        created() {
            this.getprov();
        },
        methods: {
			closePupop(){
				 this.$emit("closePupop",false);
			},
            // 取消弹出层
            adres_all() {
                this.$emit("closePupop",false)
                
            },
            x_prov() {
                this.isprov = true;
                this.iscity = false;
                this.isqu = false;
                this.isjie = false;
                this.tar = 1;
            },
            x_city() {
                this.isprov = false;
                this.iscity = true;
                this.isqu = false;
                this.isjie = false;
                this.tar = 2;
            },
            x_qu() {
                this.isprov = false;
                this.iscity = false;
                this.isqu = true;
                this.isjie = false;
                this.tar = 3;
            },
            x_jie() {
                this.isprov = false;
                this.iscity = false;
                this.isqu = false;
                this.isjie = true;
                this.tar = 4;

            },
            // 获取各省数据
            getprov() {
                let url = '/capi-biz/sys/region';
                let data = {
                    grade: 1,
                    parentCode: 1
                };
                uni.$u.http.post(url, data).then(res => {
                        // console.log("this.province", res)
                        this.province = res
                }).catch(err => {
                    console.log(err)
                })
            },
            // 省跳市
            getprovs(e) {
                this.province_id = e.currentTarget.id;
                this.prov = e.currentTarget.dataset.name;
                this.tas1 = e.currentTarget.dataset.index;
                this.tas2 = 999;
                this.tas3 = 999;
                this.tas4 = 999;
                this.tar = 9;
                var nowTime = new Date();
                if (nowTime - this.tapTime < 500) {
                    console.log('阻断')
                    uni.showToast({
                        title: '你的操作太快了',
                        icon: 'none'
                    })
                    return;
                }
                // 获取所有市
                let url = '/capi-biz/sys/region';
                let data = {
                    grade: 2,
                    parentCode: this.province_id
                };
                uni.$u.http.post(url, data).then(res => {
                  
                        this.citys = res;
                        this.city = '';
                        this.isprov = false;
                        this.iscity = true;
                        this.iscitys = true;
                        this.isqu = false;
                        this.isqus = false;
                        this.isjie = false;
                        this.isjies = false;
                        this.tapTime = nowTime;
                     
                 

                }).catch(err => {
                    console.log(err)
                })
            },
            // 市跳区
            getcity(e) {
                this.city_id = e.currentTarget.id;
                this.city = e.currentTarget.dataset.name;
                this.tas2 = e.currentTarget.dataset.index;
                this.tas3 = 999;
                this.tas4 = 999;
                this.tar = 9;
                var nowTime = new Date();
                if (nowTime - this.tapTime < 500) {
                    console.log('阻断')
                    wx.showToast({
                        title: '你的操作太快了',
                        icon: 'none'
                    })
                    return;
                }
                // 获取所有区
                let url = '/capi-biz/sys/region';
                let data = {
                    grade: 3,
                    parentCode: this.city_id
                };
                uni.$u.http.post(url, data).then(res => {
                        this.areas = res;
                        this.area = '';
                        this.iscity = false;
                        this.isqu = true;
                        this.isqus = true;
                        this.isjie = false;
                        this.isjies = false;
                        this.tapTime = nowTime;
                        // console.log("this.areas", res)
                    

                }).catch(err => {
                    console.log(err)
                })
            },
            // 区跳街道
            getarea(e) {
                this.g_town = [];

                this.area_id = e.currentTarget.id;
                this.area = e.currentTarget.dataset.name;
                this.tas3 = e.currentTarget.dataset.index;
                this.tar = 9;
                this.tas4 = 999;
                var nowTime = new Date();
                if (nowTime - this.tapTime < 500) {
                    uni.showToast({
                        title: '你的操作太快了',
                        icon: 'none'
                    })
                    return;
                }
                // 获取所有街道
                let url = '/capi-biz/sys/region';
                let data = {
                    grade: 4,
                    parentCode: this.area_id
                };
                 uni.$u.http.post(url, data).then(res => {
                         console.log(res,'ressss')
						 if(!res.data){
							  
						 }
                        this.g_town.push(...res)
                        let a = {
                            name: '-'
                        }
                        this.g_town.push(a)
                        this.isqu = false;
                        this.towns = this.g_town;
                        this.g_town = '';
						this.town ='';
                        this.isjie = true;
                        this.isjies = true;
                        // console.log("this.areas", res)
                  

                }).catch(err => {
                    console.log(err)
					if(err.msg == '数据为空'){
						this.addres = this.prov + '-' + this.city + '-' + this.area ;
						this.result = this.prov + this.city + this.area + '';
						// 传值给父组件
						let data = {
						    result: this.addres,
						    provinceId: this.province_id,
						    cityId: this.city_id,
						    districtId: this.town_id,
						    townId: '',
							provinceName:this.prov,
							cityName:this.city,
							areaName:this.area,
							townName:'',
						    ismask:false
						};
						this.$emit("transRegionInfo",data);
					}
                })
            },
            //街道
            gettown(e) {
                this.g_town = []
                this.town_id = e.currentTarget.id;

                //给变量赋值
                // this.ismask = false;
                this.tas4 = e.currentTarget.dataset.index;
                this.addres = this.prov + '-' + this.city + '-' + this.area + '-' + e.currentTarget.dataset.name;
                this.town = e.currentTarget.dataset.name;
                this.result = this.prov + this.city + this.area + this.town;
                // 传值给父组件
                let data = {
                    result: this.addres,
                    provinceId: this.province_id,
                    cityId: this.city_id,
                    districtId: this.town_id,
                    townId: this.area_id,
					provinceName:this.prov,
					cityName:this.city,
					areaName:this.area,
					townName:e.currentTarget.dataset.name,
                    ismask:false
                };
                this.$emit("transRegionInfo",data);
            },
            // 判断未登录状态进入登录页面
            checkLogin() {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            },
        },

    }
</script>

<style lang="scss" scoped>
    .mask {
        top: 0px;

        left: 0px;

        width: 100%;

        height: 100%;

        overflow: hidden;

        position: fixed;
        background: rgba(0, 0, 0, 0.3);
        z-index: 9;
    }

   
    .all-quan{
		height: 100%;
		overflow: auto;
		padding: 30rpx;
		padding-top: 0;
		background: #FFFFFF;
		box-sizing: border-box;
	}
    

    .adres_h1 {
		width: 100%;
		background: #FFFFFF;
		position: sticky;
		top: 0rpx;
	    padding-top: 30rpx;
		box-sizing: border-box;
		width: 100%;
        font-size: 32rpx;
    }

    .detel {
        float: right;
        width: 36rpx;
        height: 36rpx;

    }

    .detel image {
        width: 100%;
        height: 100%;
    }

    .adre_bott {
		position: sticky;
		top: 72rpx;
		width: 100%;
		background: #FFFFFF;
        padding-top: 30rpx;
		box-sizing: border-box;
        font-size: 26rpx;
    }

    .adre_bott>view {
        margin-right: 42rpx;
        display: inline-block;
    }

    .srcoll {
        width: 100%;
        // height: 600rpx;
        margin-top: 30rpx;
    }

    .adres_list {
        height: 82rpx;
        line-height: 82rpx;
        font-size: 26rpx;
    }

    .adres_r {
        float: right;
        width: 26rpx;
        height: 24rpx;
    }

    .adres_r image {
        width: 100%;
        height: 100%;
    }

    .hong {
        color: #F12200;
        height: 60rpx;
        display: inline-block;
        border-bottom: 4rpx solid #f12200;
    }

    .tas_a {
        color: #f12200 !important;
    }
</style>
